<template>
  <div class="node_setting">
    <div class="setting_title">{{ props.settingData._value.title }}</div>
    <div class="setting_item">
      <el-form :model="form" label-width="110px">
        <el-form-item label="聚合方式" required>
          <el-input v-model="form.aggregationMethod" @blur="validateAggregationMethod" />
        </el-form-item>
      </el-form>
    </div>
    <!-- <el-button class="mt-4" type="primary" @click="sendData">保存</el-button> -->
  </div>
</template>
<script lang="ts">
export default { name: "OperateSetting" };
</script>
<script setup lang="ts">
import LogicFlow from "@logicflow/core";
import { MyLogicFlowPropertiesType } from "@/types/logic-flow";
const props = defineProps<{
  lf?: LogicFlow;
  data: LogicFlow.NodeData | LogicFlow.EdgeData;
  settingData: {
    title: any;
    operate: any;
  };
}>();
const form = ref({
  aggregationMethod: "",
});

watch(
  () => props.data,
  (newVal) => {
    const {} = newVal.properties as MyLogicFlowPropertiesType;
    form.value = {
      aggregationMethod: newVal.text?.value!,
    };
    props.lf?.setProperties(newVal.id, {
      ...form.value,
    });
  },
  {
    immediate: true,
  }
);

/**
 * @description 验证表单
 */
const validateAggregationMethod = (e: FocusEvent) => {
  console.log("调用验证方法");
  const value = (e.target as HTMLInputElement).value;
  if (!value) {
    ElMessage.warning("聚合方式不可为空");
    form.value.aggregationMethod = props.data.text?.value!;
  } else {
    props.lf?.updateText(props.data.id, value);
  }
};

// const sendData = () => {
//   if (props.lf && props.data.id) {
//     props.lf.setProperties(props.data.id, {
//       ...form.value,
//     });
//   }
// };
</script>
<style lang="scss" scoped></style>
